<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 购物车商品数据
const cartItems = ref([
  {
    id: 1,
    name: '浪漫红玫瑰花束',
    description: '11朵精选昆明红玫瑰',
    spec: '11朵',
    package: '牛皮纸',
    price: 199,
    quantity: 1,
    image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80',
    selected: true
  },
  {
    id: 2,
    name: '阳光向日葵花束',
    description: '9朵向日葵主花',
    spec: '标准',
    package: '礼盒',
    price: 279,
    quantity: 1,
    image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80',
    selected: true
  },
  {
    id: 3,
    name: '彩色郁金香花束',
    description: '进口郁金香多色搭配',
    spec: '标准',
    package: '牛皮纸',
    price: 289,
    quantity: 1,
    image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80',
    selected: true
  }
]);

// 推荐商品
const recommendedProducts = [
  {
    id: 4,
    name: '纯净白色满天星花束',
    price: 199,
    image: 'https://images.unsplash.com/photo-1586376259976-6471178d2e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 5,
    name: '纯洁白百合花束',
    price: 329,
    image: 'https://images.unsplash.com/photo-1584589167171-541ce45f1eea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 6,
    name: '感恩康乃馨花束',
    price: 239,
    image: 'https://images.unsplash.com/photo-1587556930799-8dca6fad6d43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 7,
    name: '蓝色梦幻花束',
    price: 399,
    image: 'https://images.unsplash.com/photo-1591279304658-b894b00c0a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  }
];

// 计算属性
const selectedItems = computed(() => cartItems.value.filter(item => item.selected));
const selectedCount = computed(() => selectedItems.value.length);
const totalAmount = computed(() => {
  return selectedItems.value.reduce((total, item) => total + item.price * item.quantity, 0);
});
const allSelected = computed(() => cartItems.value.length > 0 && cartItems.value.every(item => item.selected));

// 方法
const decreaseQuantity = (item: any) => {
  if (item.quantity > 1) {
    item.quantity--;
  }
};

const increaseQuantity = (item: any) => {
  if (item.quantity < 99) {
    item.quantity++;
  }
};

const removeItem = (itemId: number) => {
  const index = cartItems.value.findIndex(item => item.id === itemId);
  if (index > -1) {
    cartItems.value.splice(index, 1);
  }
};

const toggleSelectAll = () => {
  const newSelectState = !allSelected.value;
  cartItems.value.forEach(item => {
    item.selected = newSelectState;
  });
};

const removeSelected = () => {
  cartItems.value = cartItems.value.filter(item => !item.selected);
};

const goToCheckout = () => {
  router.push('/checkout');
};

const goToProductDetail = (product: any) => {
  router.push('/product-detail');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-rose-500 hover:text-rose-600 font-medium">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-rose-500 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">{{ cartItems.length }}</span>
          </a>
          <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
          <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
      <h1 class="text-2xl font-bold mb-6">购物车</h1>

      <div v-if="cartItems.length === 0" class="text-center py-12">
        <font-awesome-icon icon="shopping-cart" class="text-6xl text-gray-300 mb-4" />
        <p class="text-gray-500 mb-4">购物车是空的</p>
        <a @click.prevent="router.push('/categories')" href="#" class="bg-rose-500 text-white px-6 py-2 rounded-lg hover:bg-rose-600 transition duration-300">
          去购物
        </a>
      </div>

      <div v-else>
        <!-- 购物车内容 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
          <!-- 购物车表头 -->
          <div class="hidden md:grid grid-cols-12 gap-4 p-4 border-b border-gray-100 bg-gray-50 text-gray-600 font-medium">
            <div class="col-span-6">商品信息</div>
            <div class="col-span-2 text-center">单价</div>
            <div class="col-span-2 text-center">数量</div>
            <div class="col-span-2 text-center">小计</div>
          </div>

          <!-- 购物车商品项 -->
          <div 
            v-for="item in cartItems" 
            :key="item.id"
            :class="[
              'p-4',
              cartItems.indexOf(item) < cartItems.length - 1 ? 'border-b border-gray-100' : ''
            ]"
          >
            <div class="md:grid md:grid-cols-12 md:gap-4 md:items-center">
              <!-- 商品信息 -->
              <div class="md:col-span-6 flex">
                <input 
                  v-model="item.selected"
                  type="checkbox" 
                  class="mr-3 mt-2 h-4 w-4 text-rose-500"
                >
                <div class="w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded overflow-hidden mr-4">
                  <img 
                    :src="item.image" 
                    :alt="item.name" 
                    class="w-full h-full object-cover"
                  >
                </div>
                <div>
                  <h3 class="font-medium">{{ item.name }}</h3>
                  <p class="text-sm text-gray-500 mt-1">{{ item.description }}</p>
                  <p class="text-xs text-gray-500 mt-1">规格：{{ item.spec }} | 包装：{{ item.package }}</p>
                  <div class="md:hidden mt-2 flex justify-between items-center">
                    <span class="text-rose-500 font-bold">¥{{ item.price }}</span>
                    <div class="flex border border-gray-300 rounded-md">
                      <button 
                        @click="decreaseQuantity(item)"
                        class="px-2 py-1 text-gray-600 hover:text-rose-500"
                      >
                        -
                      </button>
                      <input 
                        v-model="item.quantity" 
                        type="text" 
                        class="w-8 text-center border-l border-r border-gray-300 text-sm"
                        readonly
                      >
                      <button 
                        @click="increaseQuantity(item)"
                        class="px-2 py-1 text-gray-600 hover:text-rose-500"
                      >
                        +
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 单价 -->
              <div class="hidden md:block md:col-span-2 text-center">
                <span class="text-rose-500 font-bold">¥{{ item.price }}</span>
              </div>
              
              <!-- 数量 -->
              <div class="hidden md:flex md:col-span-2 justify-center">
                <div class="flex border border-gray-300 rounded-md">
                  <button 
                    @click="decreaseQuantity(item)"
                    class="px-3 py-1 text-gray-600 hover:text-rose-500"
                  >
                    -
                  </button>
                  <input 
                    v-model="item.quantity" 
                    type="text" 
                    class="w-10 text-center border-l border-r border-gray-300"
                    readonly
                  >
                  <button 
                    @click="increaseQuantity(item)"
                    class="px-3 py-1 text-gray-600 hover:text-rose-500"
                  >
                    +
                  </button>
                </div>
              </div>
              
              <!-- 小计 -->
              <div class="hidden md:flex md:col-span-2 justify-center items-center">
                <span class="text-rose-500 font-bold">¥{{ item.price * item.quantity }}</span>
              </div>
            </div>
            <!-- 移动端显示的小计和删除按钮 -->
            <div class="flex justify-between items-center mt-3 md:hidden">
              <span class="text-gray-500">小计：<span class="text-rose-500 font-bold">¥{{ item.price * item.quantity }}</span></span>
              <button 
                @click="removeItem(item.id)"
                class="text-gray-500 hover:text-rose-500"
              >
                <font-awesome-icon icon="trash" /> 删除
              </button>
            </div>
            <!-- 桌面端的删除按钮 -->
            <div class="hidden md:flex justify-end mt-2">
              <button 
                @click="removeItem(item.id)"
                class="text-gray-500 hover:text-rose-500 text-sm"
              >
                <font-awesome-icon icon="trash" /> 删除
              </button>
            </div>
          </div>
        </div>

        <!-- 购物车底部结算区域 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden p-4 md:p-6">
          <div class="md:flex md:justify-between md:items-center">
            <div class="mb-4 md:mb-0">
              <label class="inline-flex items-center">
                <input 
                  :checked="allSelected"
                  @change="toggleSelectAll"
                  type="checkbox" 
                  class="h-4 w-4 text-rose-500"
                >
                <span class="ml-2 text-gray-700">全选</span>
              </label>
              <button 
                @click="removeSelected"
                class="ml-4 text-gray-500 hover:text-rose-500 text-sm"
              >
                <font-awesome-icon icon="trash" /> 删除选中
              </button>
            </div>
            <div class="flex flex-col md:flex-row md:items-center">
              <div class="mb-3 md:mb-0 md:mr-6">
                <span class="text-gray-600">已选商品 <span class="text-rose-500 font-bold">{{ selectedCount }}</span> 件</span>
                <span class="ml-4 text-gray-600">合计：<span class="text-rose-500 text-xl font-bold">¥{{ totalAmount }}</span></span>
              </div>
              <button 
                @click="goToCheckout"
                class="bg-rose-500 text-white py-2 px-8 rounded-md hover:bg-rose-600 transition duration-300 text-center font-medium"
              >
                去结算
              </button>
            </div>
          </div>
        </div>

        <!-- 猜你喜欢 -->
        <section class="mt-8">
          <h2 class="text-xl font-bold mb-4">猜你喜欢</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a
              v-for="product in recommendedProducts"
              :key="product.id"
              @click.prevent="goToProductDetail(product)"
              href="#"
              class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300"
            >
              <img
                :src="product.image"
                :alt="product.name"
                class="w-full h-36 md:h-48 object-cover"
              >
              <div class="p-3 md:p-4">
                <h3 class="font-medium md:text-lg truncate">{{ product.name }}</h3>
                <p class="text-rose-500 font-bold mt-1 md:mt-2">¥{{ product.price }}</p>
              </div>
            </a>
          </div>
        </section>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a @click.prevent="router.push('/')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-rose-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>

    <!-- 页脚 - PC端 -->
    <footer class="hidden md:block bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div>
            <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
              <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
              <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
              <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
              <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
              <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
              <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
              <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
              <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
              <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li class="flex items-center">
                <font-awesome-icon icon="phone" class="mr-2 text-rose-500" />
                400-800-8888
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="envelope" class="mr-2 text-rose-500" />
                service@flowercompany.com
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="map-marker-alt" class="mr-2 text-rose-500" />
                北京市朝阳区建国路88号
              </li>
            </ul>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weixin']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weibo']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon icon="envelope" />
              </a>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
          <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
